import React, { useEffect, useMemo, useState,useContext, useCallback } from 'react'
import { Button, Space, Avatar, NavBar, List } from 'antd-mobile'
import { UserCircleOutline, UnorderedListOutline, PayCircleOutline, SetOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import context from '../store/context'
function Mine() {
    // const [userInfo, setUserInfo] = useState({})
    // useEffect(() => {
    //     let userInfo = localStorage.getItem('userInfo')
    //     try {
    //         userInfo = JSON.parse(userInfo) || {}
    //     } catch (err) {
    //         userInfo = {}
    //     }
    //     setUserInfo(userInfo)
    // }, [])

    const {userInfo,dispatch} = useContext(context);console.log('Mine',userInfo)

    const isLogin = useMemo(() => !!userInfo.authorization, [userInfo])

    const logout = useCallback(()=>{
        dispatch({type:'logout'})
    },[])

    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    return <div>
        <NavBar onBack={back} style={{ marginBottom: 30 }}>用户中心</NavBar>
        <Space block align="center" direction='vertical'>
            <Avatar style={{ '--size': '80px', color: '#58bc58' }} fallback={<UserCircleOutline fontSize={80} />} src='' />
            <h5>{userInfo.username}</h5>
        </Space>
        {
            isLogin ?
                <Button block color='primary' fill='outline' size='mini' onClick={logout}>
                    退出
                </Button>
                :
                <Space block align="center" justify="center">
                    <Button color='primary' fill='outline' size='mini' onClick={() => {
                        navigate('/reg')
                    }}>
                        注册
                    </Button>
                    <Button color='primary' fill='outline' size='mini' onClick={() => {
                        navigate('/login')
                    }}>
                        登录
                    </Button>

                </Space>

        }

        <List header='用户信息' style={{ marginTop: 30 }}>
            <List.Item prefix={<UnorderedListOutline />} onClick={() => { }}>
                账单
            </List.Item>
            <List.Item prefix={<PayCircleOutline />} onClick={() => { }}>
                总资产
            </List.Item>
            <List.Item prefix={<SetOutline />} onClick={() => { }}>
                设置
            </List.Item>
        </List>
    </div>
}
// withNavigate(Mine)
export default Mine;